<template>
  <div class="mycontrail">
     <ul class="contrail_ul">
       <li class="contrail_li" v-for='n in 10'>
          <div class="time">今天</div>
          <div class="content">
            <div class="cir">
              <div class="w_cir">
                <div class="n_cir"></div>
              </div>
            </div>
            <div class="cat">
              <div class="cato"></div>
            </div>
            <!-- 参加了一门新的课程 -->
            <!-- <div class="main">
              <div class="top">10:30参加了一门新的课程</div>
              <div class="bottom">
                <div class="bot">
                <div class="name">
                  <font>课程：</font>怎么走出努力的陷阱怎么走出努力的陷阱怎么走出努力的陷阱
                </div>
                <div class="detail">
                  <font>简介：</font>短视频蓝海变红海入局者纷至沓来者纷至沓来者纷至沓来者纷至沓来
                </div>
                </div>
              </div>
            </div> -->
            <!--  学习了一门课程-->
             <!-- <div class="main">
              <div class="top">10:30学习了一门新的课程</div>
              <div class="bottom">
                <div class="bot">
                <div class="name">
                  <font>课程：</font>怎么走出努力的陷阱怎么走出努力的陷阱怎么走出努力的陷阱
                </div>
                <div class="detail progress">
                  <div class="t">学习进度：</div>
                  <div class="pro">
                    <mt-progress :value="60" :bar-height="8">
                    <div slot="end" style="padding-left:5px;">60%</div>
                    </mt-progress>
                  </div>
                </div>
                </div>
              </div>
            </div> -->
            <!-- 完成了一场考试 -->
            <div class="main">
              <div class="top">10:30参加了一门新的课程</div>
              <div class="bottom">
                <div class="bot">
                <div class="name">
                  <font>考试：</font>期末课程简介
                </div>
                <div class="score">
                  <font>成绩：</font>80
                  <font>及格分：</font>60
                </div>
                </div>
              </div>
            </div>
            <!-- 完成了一场开始结束 -->
          </div>
       </li>
     </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Progress } from "mint-ui";
Vue.component(Progress.name, Progress);
export default {
  name: "mycontrail",
  data() {
    return {
      src: ""
    };
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {}
};
</script>
<style scoped lang="less">
.mycontrail {
  min-height: 100%;
  background: #f0f1f4;
  .contrail_ul {
    padding: 0 0.15rem;
    padding-bottom: 0.3rem;
    .contrail_li {
      padding-top: 0.25rem;
      background: url(../../assets/images/myself/line.png) repeat-y;
      background-position: 0.08rem 0;
      background-size: 0.03rem 100%;
      .time {
        height: 0.14rem;
        font-size: 0.14rem;
        color: #545454;
        padding-bottom: 0.1rem;
        padding-left: 0.62rem;
      }
      .content {
        height: 1.15rem;
        display: flex;
        .cir {
          width: 0.18rem;
          padding-top: 0.04rem;
          .w_cir {
            width: 0.18rem;
            height: 0.18rem;
            border-radius: 50%;
            background: #b4e0d4;
            text-align: center;
            line-height: 0.18rem;
            .n_cir {
              display: inline-block;
              width: 0.1rem;
              height: 0.1rem;
              border-radius: 50%;
              background: #28b98b;
            }
          }
        }
        .cat {
          width: 0.17rem;
          position: relative;
          .cato {
            width: 0;
            height: 0;
            border-width: 0.07rem 0.07rem 0.07rem 0;
            border-style: solid;
            border-color: transparent #ffffff transparent transparent;
            position: absolute;
            top: 0.06rem;
            right: 0;
          }
        }
        .main {
          flex: 1;
          height: 1.15rem;
          background: #ffffff;
          border-radius: 0.05rem;
          padding: 0.075rem 0.15rem;
          .top {
            height: 0.3rem;
            line-height: 0.3rem;
            color: #333333;
            font-size: 0.15rem;
          }
          .bottom {
            width: 100%;
            padding: 0.08rem 0;
            .bot {
              width: 100%;
              border-left: 0.02rem solid #28b98b;
              .name {
                padding-left: 0.13rem;
                width: 2.5rem;
                max-width: inherit;
                font-size: 0.15rem;
                color: #333333;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                word-wrap: break-word;
                font {
                  font-size: 0.16rem;
                  color: #28b98b;
                }
              }
              .score{
                margin-top: 0.21rem;
                padding-left: 0.13rem;
                width: 2.5rem;
                font-size: 0.15rem;
                color: #999999;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                word-wrap: break-word;
                font{
                  color:#333333;
                }
              }
              .detail {
                margin-top: 0.21rem;
                padding-left: 0.13rem;
                width: 2.5rem;
                font-size: 0.15rem;
                color: #333333;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                word-wrap: break-word;
                &.progress {
                  margin-top: 0.1rem;
                  padding-left: 0.13rem;
                  display: flex;
                  font-size: 0.08rem;
                  color: #333333;
                  .t {
                    width: 0.7rem;
                    font-size: 0.1rem;
                    height: 0.2rem;
                    line-height: 0.2rem;
                  }
                  .pro {
                    flex: 1;
                    height: 0.2rem;
                    line-height: 0.2rem;
                    .mt-progress {
                      height: 0.2rem;
                      line-height: 0.2rem;
                      .mt-progress-progress {
                        background-color: #28b98b;
                      }
                    }
                  }
                }
                font {
                  font-size: 0.16rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>


